<template>
  <div class="table-style">
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :indent="indent"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        ref="multipleTable"
        row-key="id"
        @select="rowSelect"
        @select-all="selectAll">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  module.exports = {
    name: 'el-tree-table',
    data() {
      return {
        tableData: [
          {
            id: 1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id: 2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            id: 3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
                id: 222,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 2322,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }]
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }]
          }, {
            id: 4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
      }
    },
    methods: {
      rowSelect(selection, row) { // 选中单行时，只选中单行
        var self = this;
        // 行选不进行选中所有子菜单
        if (!row.isChecked) {
          self.$refs.multipleTable.toggleRowSelection(row, true) //行变为选中状态
          row.isChecked = true
        } else {
          self.$refs.multipleTable.toggleRowSelection(row, false)
          row.isChecked = false
        }
      },
      selectAll() { // 树形表格选中点击全部勾选全部与取消全部
        var self = this;
        this.$refs.multipleTable.data.map(function (items) {
          //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
          if (!items.isChecked) {
            items.isChecked = true
          } else {
            items.isChecked = false
          }
          if(items.children) {
            self.selectAllChild(items.children)
          }
        })
      },
      selectAllChild(data) {
        var self = this;
        data.map(function (items) {
          //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
          if(items.children) {
            self.selectAllChild(items.children)
          }
          if (!items.isChecked) {
            self.$refs.multipleTable.toggleRowSelection(items, true) //行变为选中状态
            items.isChecked = true
          } else {
            self.$refs.multipleTable.toggleRowSelection(items, false)
            items.isChecked = false
          }
        })
      }
    },

  }
</script>

<style scoped>

</style>